<template>
			<view class="tab-Navbox">
				<!-- 顶部导航栏 -->
				<view class="horizonal-tab">
					<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
						<block v-for="(item,index) in tabBars" :key="index">
							<view class="scroll-tab-item " :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
								{{item.name}}
								<view class="scroll-tab-line"></view>
							</view>
						</block>
					</scroll-view>
						<view class="iconfont icon-sousuo nav-fenle"@click="toSeachr"></view>
				</view>
		
				<!-- 内容区 -->
				<view class="content content-bigbox">
					<!-- <Search></Search> -->
					
					<!-- 滑块视图 -->
					<swiper :current="tabIndex" @change="tabChange" class="swiper_car">
						<!-- current:当前所在滑块的index -->
						<swiper-item v-for="(content,index) in contentList" :key="index">
							<view class="bianji_prare">
						    <text class="btn_bianji" v-if="$store.state.edit" @click="edit()">编辑</text>
							 <text class="btn_bianji" v-else="$store.state.edit" @click="edit()">取消</text>
							</view>
							<CarList></CarList>
					
						</swiper-item>
					</swiper>
					
				</view>
		
		   <Tab></Tab>
		</view>
		
	</template>
		
<script>
import Tab from '../../components/tarbar/tar.vue';
// import '@/static/font_4005658_ghrolpqeg6q/iconfont.css';
import  Search from '@/components/search/search.vue';
import CarList from "@/components/CarLIst/CarLIst.vue"

			export default {
				name:'NarBar',
				data() {
					return {
						tabIndex: 0,
						/* 选中标签栏的序列,默认显示第一个 */
						contentList: [
							"收藏",
							"历史",
							
						],
						tabBars: [{
								name: '收藏',
								id: '1'
							},
							{
								name: '历史',
								id: '2'
							},
						],
					
					}
				},
				components:{
					Search,
		           CarList,
					Tab
				},
				onLoad(){
					//页面加载时给予开关默认
					this.$store.state.edit=true;
				},
				methods: {
					//编辑
					edit(){
					 this.$store.state.edit=!this.$store.state.edit;
					},
					
					//切换选项卡
					toggleTab(index) {
						this.tabIndex = index;
					},
					//滑动切换swiper
					tabChange(e) {
						console.log(e);
						this.tabIndex = e.detail.current;
					},
					toSeachr(){
						uni.navigateTo({
							url:  '/pages/bookshelf/SearchPage/Searchpage'
						})
					}
				}
			}

</script>

<style>
	/* 编辑父亲盒子 */
	.bianji_prare{
		width: 100%;
		text-align: right;
	    margin-top: 5px;
	}
	/* 编辑 */
	.btn_bianji{
        margin-right: 20px;
		
	}
	.btn_bianji:active{
		color: #e59900;
	}
	.swiper_car{
		max-height: 1600px;
		height: 800px;
	
	}
			.horizonal-tab {}
		
			.horizonal-tab .active {
				color: red;
			}
			.tab-Navbox{
				width: 100%;
				height: 100%;
			}
			.content-bigbox{
				width: 100%;
	
			}
		
			.scroll-tab {
				white-space: nowrap;
				/* 必要，导航栏才能横向*/
				border-bottom: 1rpx solid #eee;
				text-align: center;
				width: 90%;
				
			}
		
			.scroll-tab-item {
				display: inline-block;
				/* 必要，导航栏才能横向*/
				margin: 20rpx 30rpx 0 75rpx;
			}
		
			.active .scroll-tab-line {
				border-bottom: 5rpx solid red;
				border-top: 5rpx solid red;
				border-radius: 20rpx;
				width: 70rpx;
			}
			
			
			.nav-fenle{
				float: right;
				position: absolute;
				
				right: 9px;
				top:12px;
				
			}
		
			
		</style>
		